<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>母题管理系统</title>
    <style>
        /* Bootstrap 5.3.0 核心样式 - 已内嵌 */
        :root {
            --bs-blue: #0d6efd;
            --bs-indigo: #6610f2;
            --bs-purple: #6f42c1;
            --bs-pink: #d63384;
            --bs-red: #dc3545;
            --bs-orange: #fd7e14;
            --bs-yellow: #ffc107;
            --bs-green: #198754;
            --bs-teal: #20c997;
            --bs-cyan: #0dcaf0;
            --bs-black: #000;
            --bs-white: #fff;
            --bs-gray: #6c757d;
            --bs-gray-dark: #343a40;
            --bs-gray-100: #f8f9fa;
            --bs-gray-200: #e9ecef;
            --bs-gray-300: #dee2e6;
            --bs-gray-400: #ced4da;
            --bs-gray-500: #adb5bd;
            --bs-gray-600: #6c757d;
            --bs-gray-700: #495057;
            --bs-gray-800: #343a40;
            --bs-gray-900: #212529;
            --bs-primary: #0d6efd;
            --bs-secondary: #6c757d;
            --bs-success: #198754;
            --bs-info: #0dcaf0;
            --bs-warning: #ffc107;
            --bs-danger: #dc3545;
            --bs-light: #f8f9fa;
            --bs-dark: #212529;
            --bs-primary-rgb: 13, 110, 253;
            --bs-secondary-rgb: 108, 117, 125;
            --bs-success-rgb: 25, 135, 84;
            --bs-info-rgb: 13, 206, 240;
            --bs-warning-rgb: 255, 193, 7;
            --bs-danger-rgb: 220, 53, 69;
            --bs-light-rgb: 248, 249, 250;
            --bs-dark-rgb: 33, 37, 41;
            --bs-white-rgb: 255, 255, 255;
            --bs-black-rgb: 0, 0, 0;
            --bs-body-color-rgb: 33, 37, 41;
            --bs-body-bg-rgb: 255, 255, 255;
            --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
            --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
            --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
            --bs-body-font-family: var(--bs-font-sans-serif);
            --bs-body-font-size: 1rem;
            --bs-body-font-weight: 400;
            --bs-body-line-height: 1.5;
            --bs-body-color: #212529;
            --bs-body-bg: #fff;
            --bs-border-width: 1px;
            --bs-border-style: solid;
            --bs-border-color: #dee2e6;
            --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
            --bs-border-radius: 0.375rem;
            --bs-border-radius-sm: 0.25rem;
            --bs-border-radius-lg: 0.5rem;
            --bs-border-radius-xl: 1rem;
            --bs-border-radius-2xl: 2rem;
            --bs-border-radius-pill: 50rem;
            --bs-link-color: #0d6efd;
            --bs-link-hover-color: #0a58ca;
            --bs-code-color: #d63384;
            --bs-highlight-bg: #fff3cd;
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            font-family: var(--bs-body-font-family);
            font-size: var(--bs-body-font-size);
            font-weight: var(--bs-body-font-weight);
            line-height: var(--bs-body-line-height);
            color: var(--bs-body-color);
            text-align: var(--bs-body-text-align);
            background-color: var(--bs-body-bg);
            -webkit-text-size-adjust: 100%;
            -webkit-tap-highlight-color: transparent;
        }

        .container {
            width: 100%;
            padding-right: var(--bs-gutter-x, 0.75rem);
            padding-left: var(--bs-gutter-x, 0.75rem);
            margin-right: auto;
            margin-left: auto;
            max-width: 1140px;
        }

        .mt-4 { margin-top: 1.5rem !important; }
        .mb-4 { margin-bottom: 1.5rem !important; }
        .mb-3 { margin-bottom: 1rem !important; }
        .mb-2 { margin-bottom: 0.5rem !important; }
        .mb-0 { margin-bottom: 0 !important; }
        .me-1 { margin-right: 0.25rem !important; }
        .me-2 { margin-right: 0.5rem !important; }
        .ms-2 { margin-left: 0.5rem !important; }
        .mt-2 { margin-top: 0.5rem !important; }
        .p-3 { padding: 1rem !important; }
        .p-4 { padding: 1.5rem !important; }
        .px-3 { padding-right: 1rem !important; padding-left: 1rem !important; }
        .py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }

        .btn {
            display: inline-block;
            padding: 0.375rem 0.75rem;
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.5;
            color: var(--bs-body-color);
            text-align: center;
            text-decoration: none;
            vertical-align: middle;
            cursor: pointer;
            user-select: none;
            border: var(--bs-border-width) solid var(--bs-border-color);
            border-radius: var(--bs-border-radius);
            background-color: transparent;
            transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        }

        .btn:hover {
            color: var(--bs-body-color);
        }

        .btn:focus {
            outline: 0;
            box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
        }

        .btn-primary {
            color: #fff;
            background-color: var(--bs-primary);
            border-color: var(--bs-primary);
        }

        .btn-primary:hover {
            color: #fff;
            background-color: #0b5ed7;
            border-color: #0a58ca;
        }

        .btn-secondary {
            color: #fff;
            background-color: var(--bs-secondary);
            border-color: var(--bs-secondary);
        }

        .btn-outline-secondary {
            color: var(--bs-secondary);
            border-color: var(--bs-secondary);
        }

        .btn-outline-secondary:hover {
            color: #fff;
            background-color: var(--bs-secondary);
            border-color: var(--bs-secondary);
        }

        .btn-outline-primary {
            color: var(--bs-primary);
            border-color: var(--bs-primary);
        }

        .btn-outline-primary:hover {
            color: #fff;
            background-color: var(--bs-primary);
            border-color: var(--bs-primary);
        }

        .btn-outline-danger {
            color: var(--bs-danger);
            border-color: var(--bs-danger);
        }

        .btn-outline-danger:hover {
            color: #fff;
            background-color: var(--bs-danger);
            border-color: var(--bs-danger);
        }

        .btn-sm {
            padding: 0.25rem 0.5rem;
            font-size: 0.875rem;
            border-radius: 0.25rem;
        }

        .btn-lg {
            padding: 0.5rem 1rem;
            font-size: 1.25rem;
            border-radius: 0.5rem;
        }

        .btn-close {
            box-sizing: content-box;
            width: 1em;
            height: 1em;
            padding: 0.25em 0.25em;
            color: #000;
            background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
            border: 0;
            border-radius: 0.375rem;
            opacity: 0.5;
        }

        .btn-close:hover {
            color: #000;
            text-decoration: none;
            opacity: 0.75;
        }

        .card {
            position: relative;
            display: flex;
            flex-direction: column;
            min-width: 0;
            word-wrap: break-word;
            background-color: var(--bs-card-bg);
            background-clip: border-box;
            border: var(--bs-border-width) solid var(--bs-border-color);
            border-radius: var(--bs-border-radius);
        }

        .card-body {
            flex: 1 1 auto;
            padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
            color: var(--bs-card-color);
        }

        .card-title {
            margin-bottom: var(--bs-card-title-spacer-y);
            color: var(--bs-card-title-color);
        }

        .form-control {
            display: block;
            width: 100%;
            padding: 0.375rem 0.75rem;
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.5;
            color: var(--bs-body-color);
            background-color: var(--bs-body-bg);
            background-clip: padding-box;
            border: var(--bs-border-width) solid var(--bs-border-color);
            border-radius: var(--bs-border-radius);
            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        }

        .form-control:focus {
            color: var(--bs-body-color);
            background-color: var(--bs-body-bg);
            border-color: #86b7fe;
            outline: 0;
            box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
        }

        .form-label {
            margin-bottom: 0.5rem;
            font-weight: 500;
        }

        .form-group {
            margin-bottom: 1rem;
        }

        .modal {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 1055;
            display: none;
            width: 100%;
            height: 100%;
            overflow-x: hidden;
            overflow-y: auto;
            outline: 0;
        }

        .modal-dialog {
            position: relative;
            width: auto;
            margin: 0.5rem;
            pointer-events: none;
        }

        .modal-content {
            position: relative;
            display: flex;
            flex-direction: column;
            width: 100%;
            color: var(--bs-modal-color);
            pointer-events: auto;
            background-color: var(--modal-bg);
            background-clip: padding-box;
            border: 1px solid var(--border-color);
            border-radius: var(--bs-border-radius);
            outline: 0;
            opacity: 1 !important;
        }

        .modal-header {
            display: flex;
            flex-shrink: 0;
            align-items: center;
            justify-content: space-between;
            padding: var(--bs-modal-header-padding);
            border-bottom: var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color);
            border-top-left-radius: var(--bs-modal-inner-border-radius);
            border-top-right-radius: var(--bs-modal-inner-border-radius);
        }

        .modal-body {
            position: relative;
            flex: 1 1 auto;
            padding: var(--bs-modal-padding);
        }

        .modal-footer {
            display: flex;
            flex-shrink: 0;
            flex-wrap: wrap;
            align-items: center;
            justify-content: flex-end;
            padding: calc(var(--bs-modal-padding) - var(--bs-modal-footer-gap) * 0.5);
            background-color: var(--bs-modal-footer-bg);
            border-top: var(--bs-modal-footer-border-width) solid var(--bs-modal-footer-border-color);
            border-bottom-right-radius: var(--bs-modal-inner-border-radius);
            border-bottom-left-radius: var(--bs-modal-inner-border-radius);
        }

        .badge {
            display: inline-block;
            padding: 0.35em 0.65em;
            font-size: 0.75em;
            font-weight: 700;
            line-height: 1;
            color: #fff;
            text-align: center;
            white-space: nowrap;
            vertical-align: baseline;
            border-radius: 0.375rem;
        }

        .bg-secondary {
            background-color: var(--bs-secondary) !important;
        }

        .text-center { text-align: center !important; }
        .text-start { text-align: left !important; }
        .text-end { text-align: right !important; }

        .d-flex { display: flex !important; }
        .d-none { display: none !important; }
        .d-block { display: block !important; }
        .d-inline-block { display: inline-block !important; }

        .justify-content-between { justify-content: space-between !important; }
        .justify-content-end { justify-content: flex-end !important; }
        .align-items-center { align-items: center !important; }

        .flex-shrink-0 { flex-shrink: 0 !important; }

        .w-100 { width: 100% !important; }
        .h-100 { height: 100% !important; }

        .position-fixed { position: fixed !important; }
        .position-relative { position: relative !important; }
        .position-absolute { position: absolute !important; }

        .top-0 { top: 0 !important; }
        .bottom-0 { bottom: 0 !important; }
        .start-0 { left: 0 !important; }
        .end-0 { right: 0 !important; }

        .rounded { border-radius: var(--bs-border-radius) !important; }
        .rounded-circle { border-radius: 50% !important; }

        .shadow { box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; }

        .border { border: var(--bs-border-width) solid var(--bs-border-color) !important; }
        .border-0 { border: 0 !important; }
        .border-top { border-top: var(--bs-border-width) solid var(--bs-border-color) !important; }
        .border-bottom { border-bottom: var(--bs-border-width) solid var(--bs-border-color) !important; }

        .list-group {
            display: flex;
            flex-direction: column;
            padding-left: 0;
            margin-bottom: 0;
            border-radius: var(--bs-border-radius);
        }

        .list-group-item {
            position: relative;
            display: block;
            padding: 0.5rem 1rem;
            color: var(--bs-list-group-color);
            text-decoration: none;
            background-color: var(--bs-list-group-bg);
            border: var(--bs-list-group-border-width) solid var(--bs-list-group-border-color);
        }

        .list-group-item:first-child {
            border-top-left-radius: inherit;
            border-top-right-radius: inherit;
        }

        .list-group-item:last-child {
            border-bottom-right-radius: inherit;
            border-bottom-left-radius: inherit;
        }

        .input-group {
            position: relative;
            display: flex;
            flex-wrap: wrap;
            align-items: stretch;
            width: 100%;
        }

        .input-group .form-control {
            position: relative;
            flex: 1 1 auto;
            width: 1%;
            min-width: 0;
        }

        .input-group .btn {
            position: relative;
            z-index: 2;
        }

        /* 自定义图标 - SVG 内嵌 */
        .icon {
            display: inline-block;
            width: 1em;
            height: 1em;
            vertical-align: -0.125em;
            fill: currentColor;
        }

        .icon-moon { 
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z'/%3E%3C/svg%3E");
        }

        .icon-sun {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z'/%3E%3C/svg%3E");
        }

        .icon-plus {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/%3E%3C/svg%3E");
        }

        .icon-pencil {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z'/%3E%3C/svg%3E");
        }

        .icon-trash {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z'/%3E%3Cpath fill-rule='evenodd' d='M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z'/%3E%3C/svg%3E");
        }

        .icon {
            width: 16px;
            height: 16px;
            display: inline-block;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }
    </style>
    <style>
        :root {
            --bg-color: #ffffff;
            --text-color: #333333;
            --border-color: #dee2e6;
            --hover-bg: #f8f9fa;
            --card-bg: #ffffff;
            --modal-bg: #ffffff;
            --shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        [data-theme="dark"] {
            --bg-color: #1a1a1a;
            --text-color: #e0e0e0;
            --border-color: #444444;
            --hover-bg: #2d2d2d;
            --card-bg: #2d2d2d;
            --modal-bg: #2d2d2d;
            --shadow: 0 2px 4px rgba(0,0,0,0.3);
        }

        body {
            background-color: var(--bg-color);
            color: var(--text-color);
            transition: all 0.3s ease;
        }

        .card {
            background-color: var(--card-bg);
            border-color: var(--border-color);
            box-shadow: var(--shadow);
            transition: all 0.3s ease;
        }

        .list-group-item {
            background-color: var(--card-bg);
            border-color: var(--border-color);
            color: var(--text-color);
        }

        .list-group-item:hover {
            background-color: var(--hover-bg);
        }

        .btn-outline-secondary {
            color: var(--text-color);
            border-color: var(--border-color);
        }

        .btn-outline-secondary:hover {
            background-color: var(--hover-bg);
            border-color: var(--border-color);
        }

        .theme-toggle {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1000;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: none;
            background-color: var(--bs-primary);
            color: white;
            cursor: pointer;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            transition: all 0.3s ease;
        }

        .theme-toggle:hover {
            transform: scale(1.1);
        }

        .question-item {
            margin-bottom: 1rem;
            cursor: pointer;
        }

        .question-header {
            cursor: pointer;
            padding: 1rem;
            border-bottom: 1px solid var(--border-color);
        }

        .question-header:hover {
            background-color: var(--hover-bg);
        }

        .question-details {
            display: none;
            padding: 1rem;
            border-top: 1px solid var(--border-color);
        }

        .related-questions {
            margin-top: 1rem;
        }

        .badge {
            margin-right: 0.25rem;
            margin-bottom: 0.25rem;
        }

        .floating-action {
            position: fixed;
            bottom: 30px;
            right: 30px;
            z-index: 1000;
        }

        .floating-btn {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background-color: var(--bs-primary);
            color: white;
            border: none;
            font-size: 24px;
            cursor: pointer;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            transition: all 0.3s ease;
        }

        .floating-btn:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 12px rgba(0,0,0,0.3);
        }

        .modal-backdrop {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 1040;
            width: 100vw;
            height: 100vh;
            background-color: rgba(0, 0, 0, 0.7);
        }

        .fade {
            transition: opacity 0.15s linear;
        }

        .show {
            opacity: 1 !important;
        }

        .modal-open {
            overflow: hidden;
        }

        .modal-open .modal {
            overflow-x: hidden;
            overflow-y: auto;
        }
    </style>
</head>
<body>
    <div class="container mt-4">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h1 class="text-center">母题管理系统</h1>
            <button class="theme-toggle" onclick="toggleTheme()" title="切换主题">
                <span class="icon icon-moon" id="theme-icon"></span>
            </button>
        </div>

        <div id="questions-container">
            <!-- 题目列表将在这里动态生成 -->
        </div>
    </div>

    <!-- 浮动添加按钮 -->
    <div class="floating-action">
        <button class="floating-btn" onclick="showAddModal()" title="添加新题目">
            <span class="icon icon-plus"></span>
        </button>
    </div>

    <!-- 添加题目模态框 -->
    <div class="modal fade" id="addQuestionModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">添加新题目</h5>
                    <button type="button" class="btn-close" onclick="closeModal('addQuestionModal')"></button>
                </div>
                <div class="modal-body">
                    <form id="add-question-form">
                        <div class="mb-3">
                            <label for="add-question" class="form-label">题目</label>
                            <input type="text" class="form-control" id="add-question" required>
                        </div>
                        <div class="mb-3">
                            <label for="add-parse" class="form-label">解题方法</label>
                            <textarea class="form-control" id="add-parse" rows="4" required></textarea>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">关联题目</label>
                            <div id="add-related-container">
                                <div class="input-group mb-2">
                                    <input type="text" class="form-control add-related-input" placeholder="输入关联题目">
                                    <button class="btn btn-outline-secondary" type="button" onclick="removeRelatedInput(this)">
                                        <span class="icon icon-trash"></span>
                                    </button>
                                </div>
                            </div>
                            <button type="button" class="btn btn-outline-primary btn-sm" onclick="addRelatedInput('add')">
                                <span class="icon icon-plus"></span> 添加关联题目
                            </button>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" onclick="closeModal('addQuestionModal')">取消</button>
                    <button type="button" class="btn btn-primary" onclick="addQuestion()">添加</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 编辑题目模态框 -->
    <div class="modal fade" id="editQuestionModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">编辑题目</h5>
                    <button type="button" class="btn-close" onclick="closeModal('editQuestionModal')"></button>
                </div>
                <div class="modal-body">
                    <form>
                        <input type="hidden" id="edit-id">
                        <div class="mb-3">
                            <label for="edit-question" class="form-label">题目</label>
                            <input type="text" class="form-control" id="edit-question" required>
                        </div>
                        <div class="mb-3">
                            <label for="edit-parse" class="form-label">解题方法</label>
                            <textarea class="form-control" id="edit-parse" rows="4" required></textarea>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">关联题目</label>
                            <div id="edit-related-container">
                                <!-- 关联题目输入框将在这里动态生成 -->
                            </div>
                            <button type="button" class="btn btn-outline-primary btn-sm" onclick="addRelatedInput('edit')">
                                <span class="icon icon-plus"></span> 添加关联题目
                            </button>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" onclick="closeModal('editQuestionModal')">取消</button>
                    <button type="button" class="btn btn-primary" onclick="updateQuestion()">保存</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 简化的Modal实现
        class Modal {
            constructor(element) {
                this.element = element;
                this.backdrop = null;
                this._isShown = false;
            }

            show() {
                if (this._isShown) return;
                this._isShown = true;
                
                this.element.style.display = 'block';
                this.element.classList.add('show');
                
                this.createBackdrop();
                document.body.classList.add('modal-open');
            }

            hide() {
                if (!this._isShown) return;
                this._isShown = false;
                
                this.element.style.display = 'none';
                this.element.classList.remove('show');
                
                if (this.backdrop) {
                    this.backdrop.remove();
                    this.backdrop = null;
                }
                
                document.body.classList.remove('modal-open');
            }

            createBackdrop() {
                this.backdrop = document.createElement('div');
                this.backdrop.className = 'modal-backdrop fade show';
                this.backdrop.style.cssText = `
                    position: fixed;
                    top: 0;
                    left: 0;
                    z-index: 1040;
                    width: 100vw;
                    height: 100vh;
                    background-color: rgba(0, 0, 0, 0.5);
                `;
                document.body.appendChild(this.backdrop);
                
                this.backdrop.addEventListener('click', () => this.hide());
            }

            static getInstance(element) {
                if (!element._modal) {
                    element._modal = new Modal(element);
                }
                return element._modal;
            }
        }

        // 全局Modal对象
        window.bootstrap = {
            Modal: Modal
        };

        // 动态添加关联题目输入框
        function addRelatedInput(type) {
            const container = document.getElementById(`${type}-related-container`);
            const inputGroup = document.createElement('div');
            inputGroup.className = 'input-group mb-2';
            inputGroup.innerHTML = `
                <input type="text" class="form-control ${type}-related-input" placeholder="输入关联题目">
                <button class="btn btn-outline-secondary" type="button" onclick="removeRelatedInput(this)">
                    <span class="icon icon-trash"></span>
                </button>
            `;
            container.appendChild(inputGroup);
        }

        // 移除关联题目输入框
        function removeRelatedInput(button) {
            button.closest('.input-group').remove();
        }

        // 获取所有关联题目输入值
        function getRelatedQuestions(type) {
            const inputs = document.querySelectorAll(`.${type}-related-input`);
            return Array.from(inputs)
                .map(input => input.value.trim())
                .filter(value => value.length > 0);
        }

        // 主题切换
        function toggleTheme() {
            const html = document.documentElement;
            const currentTheme = html.getAttribute('data-theme') || 'light';
            const newTheme = currentTheme === 'light' ? 'dark' : 'light';
            
            html.setAttribute('data-theme', newTheme);
            localStorage.setItem('theme', newTheme);
            
            const icon = document.getElementById('theme-icon');
            icon.className = newTheme === 'dark' ? 'icon icon-sun' : 'icon icon-moon';
        }

        // 关闭模态框
        function closeModal(modalId) {
            const modal = document.getElementById(modalId);
            const modalInstance = bootstrap.Modal.getInstance(modal);
            modalInstance.hide();
        }

        // 显示添加模态框
        function showAddModal() {
            const modal = bootstrap.Modal.getInstance(document.getElementById('addQuestionModal'));
            modal.show();
        }

        // 初始化主题
        document.addEventListener('DOMContentLoaded', function() {
            const savedTheme = localStorage.getItem('theme') || 'light';
            document.documentElement.setAttribute('data-theme', savedTheme);
            const icon = document.getElementById('theme-icon');
            icon.className = savedTheme === 'dark' ? 'icon icon-sun' : 'icon icon-moon';
            
            loadQuestions();
        });

        // 加载题目列表
        async function loadQuestions() {
            try {
                const response = await fetch('/api/questions');
                const questions = await response.json();
                displayQuestions(questions);
            } catch (error) {
                console.error('加载题目失败:', error);
            }
        }

        // 显示题目列表
        function displayQuestions(questions) {
            const container = document.getElementById('questions-container');
            container.innerHTML = '';

            questions.forEach(question => {
                const questionDiv = document.createElement('div');
                questionDiv.className = 'card question-item';
                questionDiv.innerHTML = `
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center question-header" onclick="toggleDetails(${question.id})">
                            <h5 class="card-title mb-0">${question.question}</h5>
                            <div>
                                <button class="btn btn-sm btn-outline-secondary me-2" onclick="event.stopPropagation(); editQuestion(${question.id})">
                                    <span class="icon icon-pencil"></span>
                                </button>
                                <button class="btn btn-sm btn-outline-danger" onclick="event.stopPropagation(); deleteQuestion(${question.id})">
                                    <span class="icon icon-trash"></span>
                                </button>
                            </div>
                        </div>
                        <div class="question-details" id="details-${question.id}">
                            <p><strong>解题方法：</strong></p>
                            <p>${question.parse}</p>
                            ${question.关联题目 && question.关联题目.length > 0 ? `
                                <div class="related-questions">
                                    <strong>关联题目：</strong>
                                    ${question.关联题目.map(q => `<span class="badge bg-secondary me-1">${q}</span>`).join('')}
                                </div>
                            ` : ''}
                        </div>
                    </div>
                `;
                container.appendChild(questionDiv);
            });
        }

        // 切换详情显示
        function toggleDetails(questionId) {
            const details = document.getElementById(`details-${questionId}`);
            if (details.style.display === 'none' || details.style.display === '') {
                details.style.display = 'block';
            } else {
                details.style.display = 'none';
            }
        }

        // 添加题目
        async function addQuestion() {
            const question = document.getElementById('add-question').value;
            const parse = document.getElementById('add-parse').value;
            const relatedQuestions = getRelatedQuestions('add');

            try {
                const response = await fetch('/api/questions', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        question: question,
                        parse: parse,
                        关联题目: relatedQuestions
                    })
                });

                if (response.ok) {
                    closeModal('addQuestionModal');
                    document.getElementById('add-question-form').reset();
                    // 重置关联题目输入框
                    const container = document.getElementById('add-related-container');
                    container.innerHTML = `
                        <div class="input-group mb-2">
                            <input type="text" class="form-control add-related-input" placeholder="输入关联题目">
                            <button class="btn btn-outline-secondary" type="button" onclick="removeRelatedInput(this)">
                                <span class="icon icon-trash"></span>
                            </button>
                        </div>
                    `;
                    loadQuestions();
                }
            } catch (error) {
                console.error('添加题目失败:', error);
            }
        }

        // 编辑题目
        function editQuestion(questionId) {
            fetch(`/api/questions`)
                .then(response => response.json())
                .then(questions => {
                    const question = questions.find(q => q.id === questionId);
                    if (question) {
                        document.getElementById('edit-id').value = question.id;
                        document.getElementById('edit-question').value = question.question;
                        document.getElementById('edit-parse').value = question.parse;
                        
                        // 清空并重新生成关联题目输入框
                        const container = document.getElementById('edit-related-container');
                        container.innerHTML = '';
                        
                        if (question.关联题目 && question.关联题目.length > 0) {
                            question.关联题目.forEach(related => {
                                const inputGroup = document.createElement('div');
                                inputGroup.className = 'input-group mb-2';
                                inputGroup.innerHTML = `
                                    <input type="text" class="form-control edit-related-input" value="${related}" placeholder="输入关联题目">
                                    <button class="btn btn-outline-secondary" type="button" onclick="removeRelatedInput(this)">
                                        <span class="icon icon-trash"></span>
                                    </button>
                                `;
                                container.appendChild(inputGroup);
                            });
                        } else {
                            // 如果没有关联题目，添加一个空输入框
                            addRelatedInput('edit');
                        }
                        
                        const modal = bootstrap.Modal.getInstance(document.getElementById('editQuestionModal'));
                        modal.show();
                    }
                });
        }

        // 更新题目
        async function updateQuestion() {
            const id = parseInt(document.getElementById('edit-id').value);
            const question = document.getElementById('edit-question').value;
            const parse = document.getElementById('edit-parse').value;
            const relatedQuestions = getRelatedQuestions('edit');

            try {
                const response = await fetch(`/api/questions/${id}`, {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        question: question,
                        parse: parse,
                        关联题目: relatedQuestions
                    })
                });

                if (response.ok) {
                    closeModal('editQuestionModal');
                    loadQuestions();
                }
            } catch (error) {
                console.error('更新题目失败:', error);
            }
        }

        // 删除题目
        async function deleteQuestion(questionId) {
            if (confirm('确定要删除这个题目吗？')) {
                try {
                    const response = await fetch(`/api/questions/${questionId}`, {
                        method: 'DELETE'
                    });

                    if (response.ok) {
                        loadQuestions();
                    }
                } catch (error) {
                    console.error('删除题目失败:', error);
                }
            }
        }
    </script>
</body>
</html>